<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
</head>
<style>
*{
    margin: 0px ;
    padding: 0px;
}
#container{
    position: relative;
}
.box{
    padding: 5px;
    float: left;
}
.box_img{
    padding: 5px;
    border: 1px solid #cccccc; 
    box-shadow:0 0 5px #ccc;  
    border-radius: 5px;  
}
.box_img img{
    width: 150px;
    height: auto;
}


</style>
<body>
    <div id="container">
        <!--容器-->
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="a.jpg">
            </div>
        </div>
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="b.jpg">
            </div>
        </div>
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="c.jpg">
            </div>
        </div>
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="d.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="a.jpg">
            </div>
        </div>
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="b.jpg">
            </div>
        </div>
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="c.jpg">
            </div>
        </div>
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="d.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="a.jpg">
            </div>
        </div>
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="b.jpg">
            </div>
        </div>
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="c.jpg">
            </div>
        </div>
        <div class="box">
            <!--承载图片容器-->
            <div class="box_img">
                <!--边框-->
                <img src="d.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <!--边框-->
                <img src="e.jpg">
            </div>
        </div>
    </div>
</body>
</html>
<script src="jquery.js"></script>
<script>
/*$(function(){
	imglocation("container","box");
	var imgdata={"data":[{"src":"a.jpg"},{"src":"b.jpg"},{"src":"c.jpg"},{"src":"d.jpg"},{"src":"e.jpg"}]};
	window.onscroll=function(){
		if(checkscroll("container","box")){
			var dparent=$("#container");
			for(var i=0;i<imgdata.data.length;i++){
				var dchild=$('<div>',{class:'box'}).appendTo(dparent);
				var boximg=$('<div>',{class:'box_img'}).appendTo(dchild);
				var img=$('<img>',{src:imgdata.data[i].src}).appendTo(boximg);
			}
		}
		imglocation("container","box");
	}
	function checkscroll(parent,child){
		var dparent=document.getElementById(parent);
		var dchild=get_child(dparent,child);
		var lastimgheight=dchild[dchild.length-1].offsetHeight;
		var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
		var pageheight=document.body.clientHeight||document.documentElement.clientHeight;
		if(lastimgheight<scrolltop+pageheight){
			return true;
		}
	}
	function imglocation(parent,child){
		var dparent=document.getElementById(parent);
		var dchild=get_child(dparent,child);
		var dwidth=getwidth(dparent,dchild);
		var imgwz=minimglocation(dwidth,dchild);
	}
	function get_child(parent,child){
		var child_array=[];
		var allchild=$("#container").children("*");
		for(var i=0;i<allchild.length;i++){
			if(allchild[i].className==child){
				child_array.push(allchild[i]);
			}
		}
		return child_array;
	}
	function getwidth(dparent,dchild){
		var imgwidth=dchild[1].offsetWidth; 
		var winwidth=$(window).width();
		var numwidth=Math.floor(winwidth/imgwidth);
		dparent.style.cssText="width:"+imgwidth*numwidth+"px; margin: 0 auto";
		return numwidth;
	}
	function minimglocation(dwidth,dchild){
		var boxheightarray=[];
		var length=$(dchild).length;
		for(var i=0;i<length;i++){
			if(i<dwidth){
				boxheightarray[i]=dchild[i].offsetHeight;	
			}else{
				var minheight=Math.min.apply(null,boxheightarray);
				var minindex=getminindex(boxheightarray,minheight);	
				$(dchild).eq(i).css("position","absolute");
				$(dchild).eq(i).css("top",minheight+"px");
				dchild[i].style.left=dchild[minindex].offsetLeft+"px";
				boxheightarray[minindex]=boxheightarray[minindex]+dchild[i].offsetHeight;
			}
		}
	}
	function getminindex(boxheightarray,minheight){
		for(var i in boxheightarray){
			if(boxheightarray[i]==minheight){
				return i;
			}
		}
	}
})*/
$(function(){
	var imgdata={"data":[{"src":"a.jpg"},{"src":"b.jpg"},{"src":"c.jpg"},{"src":"d.jpg"},{"src":"e.jpg"}]};
	fall();
	window.onscroll=function(){
		if(checkscroll()){
			var dparent=$("#container");
			for(var i=0;i<imgdata.data.length;i++){
				var dchild=$('<div>',{class:'box'}).appendTo(dparent);
				var boximg=$('<div>',{class:'box_img'}).appendTo(dchild);
				var img=$('<img>',{src:imgdata.data[i].src}).appendTo(boximg);
			}
		}
		fall();
	}
	function checkscroll(){
		var dparent=$("#container");
		var index=$(".box").length-1
		var lastimgheight=$(".box").eq(index).position().top;
		var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
		var pageheight=document.body.clientHeight||document.documentElement.clientHeight;
		if(lastimgheight<scrolltop+pageheight){
			return true;
		}
	}
	function fall(){
		var winwidth=$(window).width();
		var boxwidth=$(".box").outerWidth();
		var numwidth=Math.floor(winwidth/boxwidth);
		var boxheightarray=[];
		$("#container").css({"width":boxwidth*numwidth+"px","margin":"0 auto"});
		$("#container .box").each(function(index, element) {
			if(index<numwidth){
				boxheightarray[index]=$(".box").eq(index).outerHeight();	
			}else{
				var minheight=Math.min.apply(null,boxheightarray);
				var minindex=getminindex(boxheightarray,minheight);
				var minleft=$(".box").eq(minindex).position().left+"px";
				$(".box").eq(index).css({"position":"absolute","top":minheight+"px","left":minleft});
				boxheightarray[minindex]=boxheightarray[minindex]+$(".box").eq(index).outerHeight();
			}
		});
		function getminindex(boxheightarray,minheight){
			for(var i in boxheightarray){
				if(boxheightarray[i]==minheight){
					return i;
				}
			}
		}	
	}
})	
</script>
